<template>
  <div class="container">
    <div id="MyOrdersLink">
      <router-link :to="{path:'/orderList/'+this.username}"><button><span>My Orders</span></button></router-link>
    </div>

    <div class="display">

      <div id="Catalog">

        <table>
          <tr>
            <th colspan="2">Order <span v-text="orderId"></span>
              <!--            todo:转换日期格式-->
              <span v-text="'Date: '+order.orderDate" style="margin-left: 150px"></span>
            </th>
          </tr>
          <tr>
            <th colspan="2">Payment Details</th>
          </tr>
          <tr>
            <td>Card Type:</td>
            <td v-text="order.cardType"></td>
          </tr>
          <tr>
            <td>Card Number:</td>
            <td v-text="order.creditCard+ ' * Fake number!'"></td>
          </tr>
          <tr>
            <td>Expiry Date (MM/YYYY):</td>
            <td v-text="order.expiryDate"></td>
          </tr>
          <tr>
            <th colspan="2">Billing Address</th>
          </tr>
          <tr>
            <td>First name:</td>
            <td v-text="order.billToFirstName"></td>
          </tr>
          <tr>
            <td>Last name:</td>
            <td v-text="order.billToLastName"></td>
          </tr>
          <tr>
            <td>Address 1:</td>
            <td v-text="order.billAddress1"></td>
          </tr>
          <tr>
            <td>Address 2:</td>
            <td v-text="order.billAddress2"></td>
          </tr>
          <tr>
            <td>City:</td>
            <td v-text="order.billCity"></td>
          </tr>
          <tr>
            <td>State:</td>
            <td v-text="order.billState"></td>
          </tr>
          <tr>
            <td>Zip:</td>
            <td v-text="order.billZip"></td>
          </tr>
          <tr>
            <td>Country:</td>
            <td v-text="order.billCountry"></td>
          </tr>

        </table>
      </div>

      <div id="Catalog2" style="max-height: 536px;min-height: 504px;overflow-y: auto;">
        <table>
          <tr>
            <th colspan="2">Shipping Address</th>
          </tr>
          <tr>
            <td>First name:</td>
            <td v-text="order.shipToFirstName"></td>
          </tr>
          <tr>
            <td>Last name:</td>
            <td v-text="order.shipToLastName"></td>
          </tr>
          <tr>
            <td>Address 1:</td>
            <td v-text="order.shipAddress1"></td>
          </tr>
          <tr>
            <td>Address 2:</td>
            <td v-text="order.shipAddress2"></td>
          </tr>
          <tr>
            <td>City:</td>
            <td v-text="order.shipCity"></td>
          </tr>
          <tr>
            <td>State:</td>
            <td v-text="order.shipState"></td>
          </tr>
          <tr>
            <td>Zip:</td>
            <td v-text="order.shipZip"></td>
          </tr>
          <tr>
            <td>Country:</td>
            <td v-text="order.shipCountry"></td>
          </tr>
          <tr>
            <td>Courier:</td>
            <td v-text="order.courier"></td>
          </tr>
          <tr>
            <td colspan="2">Status:
              <span v-text="order.status"></span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <table>
                <tr>
                  <th>Item ID</th>
                  <th>Description</th>
                  <th>Quantity</th>
                  <th>Price</th>
                  <th>Total Cost</th>
                </tr>
                <tr v-for="(lineitem,key) in lineItemList">
                  <td>
                    <router-link :to="'/productForm/'+lineitem.item.productId" v-text="lineitem.itemId"></router-link>
                  </td>
                  <td>
                    <div v-if="lineitem != null">
                      <span v-text="lineitem.item.attribute1" id="attribute1"></span>
                      <span v-text="lineitem.item.attribute2" id="attribute2"></span>
                      <span v-text="lineitem.item.attribute3" id="attribute3"></span>
                      <span v-text="lineitem.item.attribute4" id="attribute4"></span>
                      <span v-text="lineitem.item.attribute5" id="attribute5"></span>
                      <span v-text="lineitem.item.productName" id="productName"></span>
                    </div>
                    <div v-if="lineitem == null">
                      <i>{description unavailable}</i>
                    </div>
                  </td>
                  <td>
                    <span v-text="(lineItemList[key]||{}).quantity"></span>
                  </td>
                  <td>
                    <span v-text="(lineItemList[key]||{}).unitPrice"></span>
                  </td>
                  <td>
                    <span v-text="(lineItemList[key]||{}).total"></span>
                  </td>
                </tr>
                <tr>
                  <th colspan="5"  v-if="lineItemList.length!==0">Total:
                    <span v-text="order.totalPrice"></span>
                  </th>
                  <th colspan="5"  v-else style="color: crimson">Order Failed!</th>
                </tr>
              </table>
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "viewOrderForm",
  data() {
    return {
      username:localStorage.getItem('username'),
      orderId: null,
      order: {},
      itemList: [],
      lineItemList: []
    }
  },
  // 页面加载时调用函数
  mounted() {
    this.init()
  },
  methods: {
    // 返回上一页
    back() {
      this.$router.go(-1)
    },

    init() {
      this.username = localStorage.getItem('username')
      this.orderId = this.$route.params.orderId
      // 获取订单详细信息
      axios({
        url: 'http://localhost:8088/order/viewOrderForm/' + this.orderId,
        method: 'get',
      }).then(res => {
        this.order = res.data.data
        console.log(this.order)

        // 获取订单的lineItemList
        this.lineItemList = this.order.lineItems
        console.log(this.lineItemList)

      })
    },
    getItemById(itemId){
      axios({
        url :"http://127.0.0.1:8088/catalog/item/"+itemId,
        method : 'get',
      }).then(res=>{
        return res.data.data
      })

    }
  }
}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
.display {
  max-height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 150px auto 0;
}

table {
  width: 473px;
  line-height: 30px;

}

#MyOrdersLink {
  width: 120px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background-color: antiquewhite;
  opacity: 80%;
  font-size: 22px;
  font-family: huayuan;
  color: rgb(244, 183, 103);
  position: absolute;
  top: 170px;
  left: 150px;
  padding: 5px;
  cursor: pointer;
}

#MyOrdersLink button {
  width: 120px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background-color: antiquewhite;
  opacity: 80%;
  font-size: 22px;
  font-family: huayuan;
  color: rgb(244, 183, 103);
  display: block;
  margin: 0 auto;
  padding: 5px;
  cursor: pointer;
}

#MyOrdersLink button:hover {
  color: #ff7516;
}
</style>